<template>
    <div class="weekend">
        <div class="weekend-title">周末去哪儿</div>
        <div class="weekend-item" v-for="item in list" :key="item.id">
            <div class="weekend-item-img">
                <img class="weekend-img" :src="item.imgUrl" :alt="item.title">
            </div>
            <div class="weekend-item-info">
                <p class="weekend-info-title">{{ item.title }}</p>
                <p class="weekend-info-desc">{{ item.desc }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
.weekend
    .weekend-title
        padding .2rem 0
        line-height .4rem
        background-color #eee
        text-indent .2rem
    .weekend-item
        .weekend-item-img
            overflow hidden
            width 100%
            height 0
            padding-bottom 37%
            .weekend-img
                width 100%
        .weekend-item-info
            padding .2rem
            .weekend-info-title
                line-height .4rem
                font-size .28rem
            .weekend-info-desc
                line-height .4rem
                font-size .24rem
                color #aaa
</style>
